<script setup>
import { ref, computed } from 'vue'
import Button from '@/components/Button.vue'
import { validEmail, validOrderNumber } from '@/utils/valid'
import { getOrderDetailApi, orderCompleteApi } from '@/api'
import { message, Modal } from 'ant-design-vue'
const checkRef = ref()
const checkForm = ref({
  email: '',
  order_sn: '',
})
const isCheck = ref(false)
const orderInfo = ref({
  id: '',
  order_sn: '',
  platform: '',
  item: [],
  status: '',
  pay_time: '',
  pay_amount: '',
})
const goodsNum = computed(() => {
  let num = 0
  orderInfo.value.item.forEach((item) => {
    num += item.num
  })
  return num
})
const rules = {
  email: [{ validator: validEmail, trigger: 'blur' }],
  order_sn: [{ validator: validOrderNumber, trigger: 'blur' }],
}
const check = () => {
  checkRef.value.validate().then(() => {
    getOrderDetailApi(checkForm.value).then((res) => {
      orderInfo.value = res
      isCheck.value = true
    })
  })
}
// 完成订单
const completeOrder = () => {
  orderCompleteApi({ order_id: orderInfo.value.id }).then(() => {
    orderInfo.value.status = 6
    message.success('Order completed successfully')
  })
}
</script>
<template>
  <div class="bg-gray-50">
    <div class="max-w-[1200px] flex flex-col gap-8 mx-auto pt-8 pb-10 max-[1200px]:p-3">
      <div class="flex gap-5 items-center">
        <div class="text-3xl max-[750px]:text-xl">Order Tracking</div>
        <div class="flex-1 h-0.5 bg-gray-300"></div>
      </div>
      <!-- 订单搜索前的页面 -->
      <div class="p-3 border border-gray-200" v-if="!isCheck">
        <div class="text-3xl mb-5 max-[750px]:text-xl">Track Order Status</div>
        <div class="h-[1px] w-full bg-gray-300 mb-5"></div>
        <div class="mx-auto max-w-[50%] max-[750px]:max-w-[85%]">
          <a-form ref="checkRef" :model="checkForm" :rules="rules" autocomplete="off">
            <a-form-item name="order_sn">
              <div class="flex flex-col gap-3">
                <label class="text-gray-500">Order Number</label>
                <div class="bg-gray">
                  <a-input
                    v-model:value="checkForm.order_sn"
                    placeholder="#T250619150015525613"
                    :bordered="false"
                  />
                </div>
              </div>
            </a-form-item>
            <a-form-item name="email">
              <div class="flex flex-col gap-3">
                <label class="text-gray-500">Email</label>
                <a-input
                  type="email"
                  v-model:value="checkForm.email"
                  placeholder="Email"
                  :bordered="false"
                />
              </div>
            </a-form-item>
          </a-form>
          <Button class="w-full" bg="#f9a044" @click="check">CHECK</Button>
        </div>
      </div>
      <!-- 查询出来的订单信息 -->
      <div class="flex items-start gap-5 max-[750px]:block" v-if="isCheck">
        <div class="flex-1 flex flex-col gap-5 max-[750px]:mb-5">
          <div class="flex flex-col gap-4 max-h-100 overflow-y-auto">
            <div
              class="flex justify-between items-center p-3 border border-[#ccc]"
              v-for="item in orderInfo.item"
              :key="item"
            >
              <div class="flex gap-2">
                <img :src="item.thumb" class="size-10" alt="" />
                <div>
                  <div>{{ item.goods_name }}</div>
                  <div class="text-xs text-[#ccc]">{{ item.spece_value_title }}</div>
                </div>
              </div>
              <div class="flex gap-2">
                <div>${{ item.price }}</div>
                <div>x{{ item.num }}</div>
              </div>
            </div>
          </div>
          <div class="text-xl flex justify-between items-center">
            <span class="font-bold">ALL</span>
            <span>usd ${{ orderInfo.pay_amount }}</span>
          </div>
        </div>
        <div class="flex-1 flex flex-col gap-3 border border-gray-200 p-5 max-w-[400px]">
          <div class="text-3xl">Order Summary</div>
          <div class="h-[1px] bg-[#333]"></div>
          <div class="flex justify-between">
            <span>Subtotal</span>
            <span>{{ goodsNum }}</span>
          </div>
          <div class="flex justify-between font-bold text-2xl">
            <span>Total</span>
            <span>{{ orderInfo.pay_amount }}$</span>
          </div>
          <div class="h-[1px] bg-[#333]"></div>
          <div class="max-h-[300px] p-3 overflow-y-auto flex flex-col gap-3">
            <div class="flex flex-col gap-0.5 items-center">
              <span class="font-bold text-xl"> Order Number </span>
              <span> {{ orderInfo.order_sn }} </span>
            </div>
            <div class="flex flex-col gap-0.5 items-center">
              <span class="font-bold text-xl"> Order Status </span>
              <span> {{ orderInfo.status === 1 ? 'Paid' : 'To be paid' }} </span>
            </div>
            <div class="flex flex-col gap-0.5 items-center">
              <span class="font-bold text-xl"> Order Date </span>
              <span> {{ orderInfo.pay_time }} </span>
            </div>
          </div>
        </div>
      </div>
      <div class="flex flex-col gap-5" v-if="isCheck">
        <div class="flex items-center gap-5">
          <span class="text-3xl max-[750px]:text-xl"> Order Status </span>
          <div class="flex-1 h-0.5 bg-gray-300"></div>
          <Button
            bg="#f9a044"
            @click="completeOrder"
            v-if="orderInfo.status === 1 || orderInfo.status === 2"
          >
            Complete Order
          </Button>
        </div>
        <div class="flex-1 border text-center border-gray-200 p-5">
          {{
            orderInfo.status === 0
              ? 'Your order has been cancelled. Thank you for your participation'
              : orderInfo.status === 1
                ? 'Your order has been successfully paid. We will process your order as soon as possible'
                : orderInfo.status === 2
                  ? 'Your order has been processed. Waiting to pick up your order'
                  : 'Your order has been completed. Thank you for your purchase'
          }}
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.ant-input {
  line-height: 28px;
  border-radius: 0 !important;
  background-color: #f5f5f5;
  border: 1px solid #ccc !important;
}
</style>
